<template>
    <div class="row full-height">
        <div class="col-sm-8 audio-area">
            <!--体验功能 分享-->
            <div v-if="media == 'share'" class="conversation">
                 <!--<p>{{roomUrl}}</p>-->
                <p>{{tempRoom}}</p>
                <button @click='refreshUrl'>刷新</button>
                <button @click='openCam'>打开摄像头</button>
                <button @click='enterRoom'>进入房间</button>
                <button @click='leaveRoom'>离开房间</button>        
            </div>
            <!--与指定用户聊天-->
            <div v-if="media == 'someone'" class="conversation">
                <span>通话对象：<span>{{talker}}</span></span>
                <button class="btn btn-default pull-right btn-sm">结束通话</button>
                <button class="btn btn-default pull-right btn-sm" >关闭摄像头</button>
                <button class="btn btn-default pull-right btn-sm">关闭麦克风</button>
            </div>
            <div class="row">
                <div class="" v-if="selfView">
                    <video autoplay :src="selfView"></video>
                </div>
                <div class="" v-if="!selfView">
                    <video autoplay :src="localSrc"></video>
                </div>
                <div class="" v-for="item in remoteSrc">
                    <video autoplay :src="item"></video>
                </div>
            </div>
        </div>
        <div class="col-sm-4 message-wrap">
            <div class="msg-wrap">
                <div class="media"  v-for="">
                    <div>
                        <div class="media-left">
                            <img class="media-object"  style="width: 32px; height: 32px;" src="../img/01.jpg" />
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">张三</h5>
                            <small class="col-sm-10">Location H-2, Ayojan Nagar, Near Gate-3, Near
                                        Shreyas Crossing Dharnidhar Derasar,
                                        Paldi, Ahmedabad 380007, Ahmedabad,
                                        India
                                        Phone 091 37 669307
                                        Email aapamdavad.district@gmail.com</small>
                        </div>
                    </div>
                    <div>
                        <div class="media-body">
                            <small class="col-sm-offset-2 col-sm-10">Location H-2, Ayojan Nagar, Near Gate-3, Near
                                        Shreyas Crossing Dharnidhar Derasar,
                                        Paldi, Ahmedabad 380007, Ahmedabad,
                                        India
                                        Phone 091 37 669307
                                        Email aapamdavad.district@gmail.com</small>
                        </div>
                        <div class="media-right">
                            <img class="media-object"  style="width: 32px; height: 32px;" src="../img/01.jpg" />
                        </div>
                    </div>                   
                </div>
            </div>
            <div class="send-wrap">
                <textarea class="form-control send-message" rows="2" style="box-shadow: none"></textarea>
                <div style="text-align:right">
                    <button class="btn btn-default">发送</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        props:['WebRTC'],
        data(){
            return {
                room:null,
                tempRoom:'siQJ8fsv9kBKe99',
                //problem this.roomSubscription存在对象但是没有显示出来
                roomSubscription:null,
                selfView:null,

                //现在在使用的
                talker:this.$route.params.talker,
                media:this.$route.params.media
            }
        },
        computed:{
            roomUrl:function(){
                return domain+"/video/"+this.room;
            },
            remoteSrc(){
                return this.WebRTC.remoteStream;
            },
            localSrc(){
                return this.WebRTC.localVideo;
            }
        },
        beforeMount(){
            let self = this;
            //刷新房间唯一标识
            // this.refreshUrl();
            //加载前，命令处理
            if(this.$route.params.command == 'wait'){
                this.WebRTC.sendMsg(this.$route.params.target,'joinVideoChat');
            }else if(this.$route.params.command == 'join'){
                console.log("join",this.$route.params.target)
                this.WebRTC.stomp.send(transferChannel,{},JSON.stringify({"command":"client-fire-join","target":this.$route.params.target}));
            }
        },
        methods:{
            refreshUrl(){
                let self = this;
                $.ajax({
                    type:'GET',
                    url:domain+'/msg/taste',
                    dataType:'json',
                    success:function(e){
                        if("success" == e.code){
                            self.room = e.data;
                        }else{
                            alert(e);
                        }
                    },
                    error:function(e){
                        console.log("erroer"+e);
                    }
                });
            },
            openCam(){
                let self = this;
                this.WebRTC.getVideo().then(function(stream){
                    self.selfView = window.URL.createObjectURL(stream);
                });
            },
            enterRoom(){
                let self = this;
                if(this.tempRoom != null){
                    alert("开始加入房间");
                    this.roomSubscription = this.WebRTC.joinTargetRoom("video",this.tempRoom);
                }else{
                    alert("房间不存在");
                }
            },
            leaveRoom(){
                if(this.roomSubscription != null){
                    //退出频道
                    this.roomSubscription.unsubscribe();
                    this.roomSubscription = null;
                    //TODO 发送退出房间指令
                }
            }
        }
    }
</script>

<style scoped>
.audio-area{
    height:100%;
    overflow: auto;
}
.message-wrap{
    box-shadow: 0 0 3px #ddd;
    padding:0;
    height: 100%;    
}
.msg-wrap{
    padding:5px;
    /*border-bottom:1px solid #ddd;*/
    margin:0;
    overflow: auto;
    height: 80%;
}
.send-wrap{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding:10px;
    height: 15%;
    /*background: #f8f8f8;*/
}
.send-message{
    resize: none;
    border: 0;
}

.iconstyle{
    font-size: 18px;
    margin:0 5px;
}

.conversation{
    padding:5px;
    border-bottom:1px solid #ddd;
    margin:0;
    border-radius: 5px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 10px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}
</style>